<template>
	<view class="search-bar">
		<view class="search-bar__bg"></view>
		<view class="search-bar__body">
			<input :value="keyword" @input="onInput" :placeholder="placeholder" class="search-bar__input" />
			<view @click="onSearch" class="search-bar__btn">
				<image src="../../static/img/icon-search.png" />
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			keyword: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
			    InputKeyWord:''
			}
		},
		methods: {
			onInput(ev) {
				this.InputKeyWord = ev.detail.value;
				this.$emit('input', this.InputKeyWord);
			},
			onSearch() {
				//debugger;
				this.InputKeyWord =  this.InputKeyWord || this.keyword
				this.$emit('search', this.InputKeyWord);
			}
		}
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
